<template>
  <!-- 屈光检查 -->
  <el-form inline :model="refractiveData" ref="refractiveForm" readonly>
    <el-divider content-position="left">验光信息</el-divider>
    <el-row class="bg-row">
      <el-form-item label="验光号">
        <el-input v-model="checkData.checkNumber" readonly></el-input>
      </el-form-item>
      <el-form-item label="验光师">
        <el-input v-model="checkData.checkerName" readonly></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-input v-model="checkData.checkDate" readonly></el-input>
      </el-form-item>
    </el-row>
    <el-divider content-position="left">顾客资料</el-divider>
    <el-row class="bg-row">
      <el-form-item label="卡号">
        <el-input v-model="customerData.customerCard" readonly></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input class="width-125" v-model="customerData.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input class="width-125" v-if="customerData.gender == '0'" value="男" readonly></el-input>
        <el-input class="width-125" v-if="customerData.gender == '1'" value="女" readonly></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input class="width-125" v-model="customerData.age" readonly></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input class="width-125" v-model="customerData.phone1" readonly></el-input>
      </el-form-item>
    </el-row>
    <el-divider content-position="left">主诉</el-divider>
    <el-row class="bg-row">
      <el-form-item class="miui-textarea" label="主诉" style="width: 100%;">
        <el-input type="textarea" v-model="refractiveData.customerSay" style="width: 100%;"></el-input>
      </el-form-item>
    </el-row>
    <el-divider content-position="left">配镜需求</el-divider>
    <el-row class="bg-row">
      <el-form-item label="配镜需求">
        <el-checkbox-group v-model="refractiveData.goals">
          <el-checkbox v-for="item in bizData.goalsData" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-row>
    <el-divider content-position="left">屈光检查</el-divider>
    <el-row class="bg-row">
      <el-form-item label="主导眼">
        <el-select v-model="refractiveData.leadingEye">
          <el-option v-for="item in bizData.leadingEyeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="裸视力">
        <el-form-item label="OD(右)">
          <el-input v-model="refractiveData.nakedOd"></el-input>
        </el-form-item>
        <el-form-item label="OS(左)">
          <el-input v-model="refractiveData.nakedOs"></el-input>
        </el-form-item>
      </el-form-item>
    </el-row>
    <el-divider content-position="left">检影验光</el-divider>

      <table class="miui-table">
        <tr>
          <td :colspan="9">
            <el-form-item label-width="0">
              <el-radio-group v-model="refractiveData.diffusePupil">
                <el-radio v-for="item in bizData.diffusePupilData" :label="item.value" :key="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td width="50px"></td>
          <td>球镜</td>
          <td>柱镜</td>
          <td>轴向</td>
          <td></td>
          <td>球镜</td>
          <td>柱镜</td>
          <td>轴向</td>
          <td>VA</td>
        </tr>
        <tr>
          <td>OD</td>
          <td>
            <el-form-item prop="checkBallGlassOd" label-width="0">
              <el-input v-model="refractiveData.checkBallGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="checkPostGlassOd" label-width="0">
              <el-input v-model="refractiveData.checkPostGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="checkAxesOd" label-width="0">
              <el-input v-model="refractiveData.checkAxesOd"></el-input>
            </el-form-item>
          </td>
          <td :rowspan="2">试镜</td>
          <td>
            <el-form-item prop="testBallGlassOd" label-width="0">
              <el-input v-model="refractiveData.testBallGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="testPostGlassOd" label-width="0">
              <el-input v-model="refractiveData.testPostGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="testAxesOd" label-width="0">
              <el-input v-model="refractiveData.testAxesOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-input v-model="refractiveData.testVaOd"></el-input>
          </td>
        </tr>
        <tr>
          <td>OS</td>
          <td>
            <el-form-item prop="checkBallGlassOs" label-width="0">
              <el-input v-model="refractiveData.checkBallGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="checkPostGlassOs" label-width="0">
              <el-input v-model="refractiveData.checkPostGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="checkAxesOs" label-width="0">
              <el-input v-model="refractiveData.checkAxesOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="testBallGlassOs" label-width="0">
              <el-input v-model="refractiveData.testBallGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="testPostGlassOs" label-width="0">
              <el-input v-model="refractiveData.testPostGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="testAxesOs" label-width="0">
              <el-input v-model="refractiveData.testAxesOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-input v-model="refractiveData.testVaOs"></el-input>
          </td>
        </tr>
        <tr>
          <td :colspan="8"></td>
          <td>
            <el-button size="mini">检影</el-button>
          </td>
        </tr>
      </table>
    <el-divider content-position="left">主观屈光</el-divider>
      <table class="miui-table">
        <tr>
          <td width="50px"></td>
          <td>球镜</td>
          <td>柱镜</td>
          <td>轴向</td>
          <td>VA</td>
        </tr>
        <tr>
          <td>OD</td>
          <td>
            <el-form-item prop="oaBallGlassOd" label-width="0">
              <el-input v-model="refractiveData.oaBallGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="oaPostGlassOd" label-width="0">
              <el-input v-model="refractiveData.oaPostGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="oaAxesOd" label-width="0">
              <el-input v-model="refractiveData.oaAxesOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-input v-model="refractiveData.oaVaOd"></el-input>
          </td>
        </tr>
        <tr>
          <td>OS</td>
          <td>
            <el-form-item prop="oaBallGlassOs" label-width="0">
              <el-input v-model="refractiveData.oaBallGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="oaPostGlassOs" label-width="0">
              <el-input v-model="refractiveData.oaPostGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="oaAxesOs" label-width="0">
              <el-input v-model="refractiveData.oaAxesOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-input v-model="refractiveData.oaVaOs"></el-input>
          </td>
        </tr>
        <tr>
          <td :colspan="4"></td>
          <td>
            <el-button size="mini">主观屈光</el-button>
          </td>
        </tr>
      </table>

    <el-divider content-position="left">双眼平衡结果 <span style="color: red;">*</span></el-divider>
      <table class="miui-table">
        <tr>
          <td width="50px"></td>
          <td>球镜</td>
          <td>柱镜</td>
          <td>轴向</td>
          <td>三棱镜</td>
          <td>基底</td>
          <td>远用瞳距(mm)</td>
          <td>近用瞳距(mm)</td>
          <td>瞳高</td>
          <td>VA</td>
          <td>Add</td>
        </tr>
        <tr>
          <td>OD</td>
          <td>
            <el-form-item prop="balBallGlassOd">
              <el-input v-model="refractiveData.balBallGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balPostGlassOd">
              <el-input v-model="refractiveData.balPostGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balAxesOd">
              <el-input v-model="refractiveData.balAxesOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balArriseGlassOd">
              <el-input v-model="refractiveData.balArriseGlassOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balBasisOd">
              <el-select size="mini" v-model="refractiveData.balBasisOd">
                <el-option v-for="item in bizData.basalTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balInterHighOd">
              <el-input v-model="refractiveData.balInterHighOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balInterDistanceOd">
              <el-input v-model="refractiveData.balInterDistanceOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="pupilHeightOd">
              <el-input v-model="refractiveData.pupilHeightOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balVaOd">
              <el-input v-model="refractiveData.balVaOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="addOd">
              <el-input v-model="refractiveData.addOd"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>OS</td>
          <td>
            <el-form-item prop="balBallGlassOs">
              <el-input v-model="refractiveData.balBallGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balPostGlassOs">
              <el-input v-model="refractiveData.balPostGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balAxesOs">
              <el-input v-model="refractiveData.balAxesOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balArriseGlassOs">
              <el-input v-model="refractiveData.balArriseGlassOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balBasisOs">
              <el-select size="mini" v-model="refractiveData.balBasisOs">
                <el-option v-for="item in bizData.basalTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balInterHighOs">
              <el-input v-model="refractiveData.balInterHighOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balInterDistanceOs">
              <el-input v-model="refractiveData.balInterDistanceOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="pupilHeightOs">
              <el-input v-model="refractiveData.pupilHeightOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="balVaOs">
              <el-input v-model="refractiveData.balVaOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="addOs">
              <el-input v-model="refractiveData.addOs"></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>


    <el-row class="bg-row" style="margin-top: 20px;">
      <el-form-item label="双眼平衡方法">
        <el-select v-model="refractiveData.doubleBalanceWay">
          <el-option v-for="item in bizData.doubleBalanceWayData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="双眼终点红/绿试验">
        <el-select v-model="refractiveData.doubleBalanceRg">
          <el-option v-for="item in bizData.doubleBalanceRgData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { PostGlass } from '@/util/validate'
  import * as check from '@/util/check/check'
  // import { addChkOptometryBasic,getChkOptometryBasic, addCheckRefractive, getCheckRefractive } from '@/api/admin/optometry/optometry'

  import { getCustomerOptometryByBillId } from '@/api/eims/customer'

  export default {
    data() {
      return {
        visible: false,
        activeName: 'second',
        id: '',
        checkData: {
          checkNumber: '',
          checkDate: '',
          checker: '',
        },
        refractiveData: {
          goals: [],            //  配镜需求
          leadingEye: '',       //  主导眼
          nakedOd: '',          //  裸眼视力-右
          nakedOs: '',          //  裸眼视力-左
          diffusePupil: '1',    //  验光--验光方式
          checkBallGlassOd: '', //  验光--球镜-右
          checkBallGlassOs: '', //  验光--球镜-左
          checkPostGlassOd: '', //  验光--柱镜-右
          checkPostGlassOs: '', //  验光--柱镜-左
          checkAxesOd: '',      //  验光--轴向-右
          checkAxesOs: '',      //  验光--轴向-左

          testBallGlassOd: '',  //  试镜--球镜-右
          testBallGlassOs: '',  //  试镜--球镜-左
          testPostGlassOd: '',  //  试镜--柱镜-右
          testPostGlassOs: '',  //  试镜--柱镜-左
          testAxesOd: '',       //  试镜--轴向-右
          testAxesOs: '',       //  试镜--轴向-左
          testVaOd: '',         //  试镜--VA-右
          testVaOs: '',         //  试镜--VA-左

          oaBallGlassOd: '',    //  主观屈光--球镜-右
          oaBallGlassOs: '',    //  主观屈光--球镜-左
          oaPostGlassOd: '',    //  主观屈光--柱镜-右
          oaPostGlassOs: '',    //  主观屈光--柱镜-左
          oaAxesOd: '',         //  主观屈光--轴向-右
          oaAxesOs: '',         //  主观屈光--轴向-左
          oaVaOd: '',           //  主观屈光--VA-右
          oaVaOs: '',           //  烛光屈光--VA-左

          balBallGlassOd: '',   //  眼平衡--球镜-右
          balBallGlassOs: '',   //  眼平衡--球镜-左
          balPostGlassOd: '',   //  眼平衡--柱镜-右
          balPostGlassOs: '',   //  眼平衡--柱镜-左
          balAxesOd: '',        //  眼平衡--轴向-右
          balAxesOs: '',        //  眼平衡--轴向-左
          balArriseGlassOd: '', //  眼平衡--三棱镜-右
          balArriseGlassOs: '', //  眼平衡--三棱镜-左
          balBasisOd: '',       //  眼平衡--基底-右
          balBasisOs: '',       //  眼平衡--基底-左
          balInterHighOd: '',   //  眼平衡--远用瞳距-右
          balInterHighOs: '',   //  眼平衡--远用瞳距-左
          balInterDistanceOd: '', //  眼平衡--近用瞳距-右
          balInterDistanceOs: '', //  眼平衡--近用瞳距-左
          pupilHeightOd: '',    //  眼平衡--瞳高-右
          pupilHeightOs: '',    //  眼平衡--瞳高-左
          balVaOd: '',          //  眼平衡--VA-右
          balVaOs: '',          //  眼平衡--VA-左
          addOd: '',            //  眼平衡--ADD-右
          addOs: '',            //  眼平衡--ADD-左

          doubleBalanceWay: '', //  双眼平衡方法
          doubleBalanceRg: '',  //  双眼终点红/绿实验
        },
        chkDatas: [],
        customerData: {
          customerCard: '',
          id: '',
          name: '',
          gender: '',
          age: '',
          phone1: '',
          cardType: '',
          integral: ''
        }
      }
    },
    components:{},
    computed: {
      ...mapGetters(['permissions', 'bizData', 'userInfo', 'isCollapse'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.checkData = data.checkData
        this.customerData = data.customer
        this.billId = data.billId
        this.$nextTick(() => {
          if(this.billId){
            getCustomerOptometryByBillId(this.billId).then(response => {
              if(response.data.code == '0'){
                let resultData = response.data.data
                if(resultData.goals){
                  resultData.goals = resultData.goals.split(',')
                }else{
                  resultData.goals = []
                }
                this.refractiveData = resultData
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-form-item__content {
    width: calc(100% - 80px);
  }

  .bg-row {
    // background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }

  .width-125 {
    width: 125px;
  }

  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;

    tr th {
      background-color: #f4f5f7;
    }

    tr th,
    tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: center;
    }

    .miui-table-header td {
      background-color: #7898a8;
      color: #fff;
    }

    .miui-table-tbody {
      background-color: #cadee8;
    }
  }
</style>
